

export function setupLoading() {
  const loadingStyle = document.createElement('style')

  const loadingCss = `
  .app-loading{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .app-loader {
    width: fit-content;
    font-size: 80px;
    font-family: system-ui, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #0000;
    -webkit-text-stroke: 1px #71a4f1;
    --l: #0000 45%, #71a4f1 0 55%, #0000 0;
    --g: 0/300% 100% no-repeat text;
    background: linear-gradient(-60deg, var(--l)) var(--g),linear-gradient(60deg, var(--l)) var(--g);
    animation: l7 4s linear infinite;
  }
  .app-loader:before {content: "Loading"}

  @keyframes l7 {
    0% {
      background-position: 100%, 0;
    }
    50% {
      background-position: 0, 0;
    }
    to {
      background-position: 0, 100%;
    }
  }
  .app-loader2 {
    width: 140px;
    height: 22px;
    border-radius: 20px;
    color: #71a4f1;
    border: 2px solid;
    position: relative;
  }
  .app-loader2::before {
    content: "";
    position: absolute;
    margin: 2px;
    inset: 0 100% 0 0;
    border-radius: inherit;
    background: currentColor;
    animation: l6 2s infinite;
  }
  @keyframes l6 {
    100% {
      inset: 0;
    }
  }
`
  const loading = `
  <div class="app-loading">
    <div class="app-loader"></div>
    <div class="app-loader2"></div>
  </div>
  `
  loadingStyle.innerHTML = loadingCss;

  const app = document.getElementById('root');
  if (app) {
    document.getElementsByTagName('head')[0].appendChild(loadingStyle);
    app.innerHTML = loading;
  }
}

